import React, { PureComponent } from 'react'
import { Form, Input, Radio, Cascader, Checkbox, message, Card, Button } from 'antd';
import { QuestionTypeSelect, HardLevel, QuestionBankCheckbox } from './AntComponents';
import { getQuestionDetail } from '@/services/questionsBank';
import { getSubject } from '@/services/lessons'
import {fileurl} from '@/services/baseurl'

const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 8 },
};
const taillayout = {
    wrapperCol: { offset: 2, span: 16 },
};
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
export default class Edit extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            bank: null,
            subject: '',
            type: '1',
            hardLevel: '',
            content: '',
            answer: null,
            answerIntroduce: '',
            audit: '0',
            share: '1',
            answerA: '',
            answerB: '',
            answerC: '',
            answerD: '',
            answerE: '',
            answerF: '',
            subjectOptions: [],
            img: '',
            is_jc:0
        }
    }


    goBack = () => {
        history.back()
    }
    componentDidMount() {
        getQuestionDetail({ id: this.props.match.params.id }).then(res => {
            if (!String(res.is_share)) return;
            const { types, type, subject, complexity, content, a, b, c, d, e, f,
                answer, answer_that, is_audit, is_share, img,is_jc } = res;
            this.setState({
                bank: types.split(','),
                type: type + '',
                is_jc,
                subject: subject.split(',').map(Number),
                hardLevel: complexity + '',
                content,
                answerA: a,
                answerB: b,
                answerC: c,
                answerD: d,
                answerE: e,
                answerF: f,
                answer,
                answerIntroduce: answer_that,
                audit: is_audit + '',
                share: is_share + '',
                img
            })
        })
        getSubject().then((res) => {
            if (!res || !res[0]) return;
            let data = JSON.stringify(res);
            let data2 = JSON.stringify(res);
            data = data.replace(/id/g, 'key').replace(/pkey/g, 'pid');
            data2 = data2
                .replace(/id/g, 'value')
                .replace(/title/g, 'label')
                .replace(/pvalue/g, 'pid');
            this.setState({
                subjectTreeData: JSON.parse(data),
                subjectOptions: JSON.parse(data2),
            });
        });
    }

    render() {
        const { subjectOptions, bank, subject, type, hardLevel, content, answer, answerIntroduce, audit, share,
            answerA, answerB, answerC, answerD, answerE, answerF, img,is_jc } = this.state;
        const styles = {
            width: '95%', marginBottom: 5
        }
        const answerList = [
            { value: 'A', label: 'A' },
            { value: 'B', label: 'B' },
            { value: 'C', label: 'C' },
            { value: 'D', label: 'D' },
            { value: 'E', label: 'E' },
            { value: 'F', label: 'F' },
        ]
        const hasValue = (obj: any) => {
            return obj !== 'null' && obj ? obj : ''
        }
        return (
            <Card>
                <Form>
                    <FormItem {...layout} required label="所属题库">
                        <QuestionBankCheckbox readOnly={true} value={bank} />
                    </FormItem>
                    <FormItem {...layout} required label="所属科目">
                        <Cascader options={subjectOptions} value={subject} />
                    </FormItem>
                    <FormItem {...layout} required label="所属题型">
                        <QuestionTypeSelect isModal={true} value={type} />
                    </FormItem>
                    <FormItem {...layout} required label="难易程度">
                        <HardLevel isModal={true} value={Number(hardLevel) ? hardLevel : ''} />
                    </FormItem>
                    <FormItem {...layout} required label="试题内容">
                        <Input.TextArea value={content} style={{ height: 220 }} />
                    </FormItem>
                    {
                        img && <FormItem {...layout} label="内容图片">
                            <img style={{ width: '100%', cursor: 'pointer' }} onClick={() => window.open(fileurl(is_jc)+img)} src={fileurl(is_jc)+img} alt=" " />
                        </FormItem>
                    }
                    {
                        (type === '1' || type === '2') && <FormItem {...layout} required label="答案选项">
                            <div>A：<Input style={styles} value={hasValue(answerA)}></Input></div>
                            <div>B：<Input style={styles} value={hasValue(answerB)}></Input></div>
                            <div>C：<Input style={styles} value={hasValue(answerC)}></Input></div>
                            <div>D：<Input style={styles} value={hasValue(answerD)}></Input></div>
                            <div>E：<Input style={styles} value={hasValue(answerE)}></Input></div>
                            <div>F：<Input style={styles} value={hasValue(answerF)}></Input></div>
                        </FormItem>
                    }

                    <FormItem {...layout} required label="参考答案">
                        {
                            type === '1' && <RadioGroup options={answerList} value={String(answer).trim()} />
                        }
                        {
                            type === '2' && <CheckboxGroup options={answerList} value={answer.trim()} />
                        }
                        {
                            type === '3' && <RadioGroup value={String(answer).trim()} >
                                <Radio value="正确">正确</Radio>
                                <Radio value="错误">错误</Radio>
                            </RadioGroup>
                        }
                    </FormItem>
                    <FormItem {...layout} required label="答案解析">
                        <Input value={hasValue(answerIntroduce)} />
                    </FormItem>
                    <FormItem {...layout} required label="是否审核">
                        <RadioGroup value={audit} >
                            <Radio value="0">不需要审核</Radio>
                            <Radio value="1">需要审核</Radio>
                        </RadioGroup>
                    </FormItem>
                    <FormItem  {...taillayout}>
                        <Button onClick={this.goBack}>返回</Button>
                    </FormItem>
                </Form>
            </Card>
        )
    }
}
